<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .wrap {
      width: 600px;
      margin: 100px auto;
    }

    .wrap .navBar {
      display: flex;
    }

    .wrap .navBar li {
      flex: 1;
      text-align: center;
      line-height: 45px;
      border: 1px solid #333;
    }

    .wrap .navBar .bo {
      background-color: red;
      color: #fff;
    }

    /* .wrap .navBar li{
            border-left:0 ;
        }
        .wrap .navBar li:first-child{
            border-left: 1px solid #333;
        } */

    /* .wrap .navBar li:not(:first-child){
            border-left: 0;
        } */

    /* 和li相邻的li  => 除第一个以外所有的li */
    .wrap .navBar li+li {
      border-left: 0;
    }

    .Box>div {
      height: 400px;
      width: 100%;
      text-align: center;
      line-height: 400px;
      border: 1px solid #333333;
      display: none;
    }

    .Box .bobo {
      display: block;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <ul class="navBar">
      <li>tab_01</li>
      <li>tab_02</li>
      <li>tab_03</li>
      <li>tab_04</li>
      <li>tab_05</li>
      <li>tab_06</li>
    </ul>
    <div class="Box">
      <div>bo1</div>
      <div>bo2</div>
      <div>bo3</div>
      <div>bo4</div>
      <div>bo5</div>
      <div>bo6</div>
    </div>
  </div>
</body>
<script>

  // 导航栏切换 默认第一个导航有活跃样式(特效),点击其他元素(把该元素变为活跃样式,清除上一个元素的活跃样式)
  // a. 谁是上一个 b. 我狠起来连自己都清除

  // tab栏切换 点击导航 显示对应的盒子 => 下标对应

  var navBar = document.getElementsByClassName("navBar")[0];
  var liList = navBar.getElementsByTagName("li");
  var divs = document.querySelectorAll(".Box>div");
  console.log(liList);  // [li,li,li,li,li,li]
  var time = null;

  for (let i = 0; i < liList.length; i++) { // i<6
    let li = liList[i];
    // console.log(li);

    li.onclick = function () {
      console.log(li, i); // li i

      for (j = 0; j < liList.length; j++) {
        liList[j].className = "";
        divs[j].className = "";

      }
      // if (time) {
      //   // time.style.backgroundColor = "";
      //   // time.style.color = "";
      //   time.className = "";
      //   divs[i].className = ""

      // }
      // time = this;
      liList[i].className = "bo";
      // // this.style.backgroundColor = "red";
      // // this.style.color = "#fff";
      divs[i].className = "bobo";
    }

  }
</script>

</html>